JavaScript 模块机制

前言

项目以前使用AngularJs，Angular前端框架。换工作之后新项目使用jQuery，又感觉回到原始时代。时代虽然倒回去了，但是思想不能也跟着倒回去。因此根据AngularJs编程风格封装一个简单的模块机制来写jQuery代码。

模块机制

大多数模块依赖加载器/管理器，本质上都是将这种模块定义封装进一个有好的API。在此，只是简单做了一下模块封装。

var Module = (function() {
    var modules = {};
    
    function controller(name, deps, impl) {
        for (var i = 0, len = deps.length; i < len; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    }

    function get(name) {
        return modules[name];
    }

    return {
        controller: controller,
        get: get
    }
})()

如何使用

Module.controller('hello', [], function() {
    function hello(who) {
        return 'hello ' + who;
    }
    return {
        hello: hello
    }
})
Module.controller('upperCase', ['hello'], function() {
    var who = 'dwyane wade';

    function awesome() {
        console.log(hello.hello(who).toUpperCase());
    }

    return {
        awesome: awesome
    }
})

var hello = Module.get('hello');
var upperCase = Module.get('upperCase');
console.log(hello.hello('dwyane wade'));
upperCase.awesome();

后记

ES6中引入了Class，Module。就不需要我们过多的了解模块化机制以及设计模式思想就能很好的管理代码，但是深入的去学习设计模式对整体框架把控还是有很大地帮助的。